<template>
	<view class="container">
		<swiper class="video-swiper" current="1" vertical="true" @animationfinish="animationfinish"
			:style="{height:windowHeight+'px'}" :circular="circular">

			<swiper-item v-for="(item,index) in curQueue" style="background-color: green;">
				<video :id="'video_'+index" class="video_item" :show-center-play-btn="false" :src="item.src">
				</video>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoList: [],
				nextQueue: [],
				prevQueue: [],
				curQueue: [],
				circular: false,
				last: 1,
				change: -1,
				invalidUp: 0,
				invalidDown: 0,
				videoContexts: [],
				windowHeight: 0
			};
		},
		onLoad() {
			let that = this;
			let origin = [
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/ep14-%E8%94%A1%E5%8A%A0%E5%BD%AC%E8%82%9D%E7%99%8C%E6%96%B0%E6%B2%BB%E7%96%97%E5%8A%9E%E6%B3%95%E5%8F%8A%E4%B8%B4%E5%BA%8A%E8%AF%95%E9%AA%8C1733667862863.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/ep131733387250068.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/ep121733280804754.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/12%E6%9C%882%E6%97%A51733109779006.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/11%E6%9C%8828%E6%97%A51732776318887.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/11%E6%9C%8826%E6%97%A51732637996150.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/%E7%AC%AC8%E6%9C%9F-%E6%B2%88%E6%85%A7%E6%80%A11732504648781.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/%E7%A5%9E%E5%A5%87%E5%BE%AE%E9%87%8F%E5%85%83%E7%B4%A0%E7%A1%921732845599612.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/3dcf0e554e30d24397967cfba357fcdb1729243235028.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/stodownload1729242972446.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/23531524271f7a1e497450d996f91f4c1729674107965.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/video%282%291731481808347.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/11%E6%9C%8814%E6%97%A5%282%291731636079923.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/11%E6%9C%8817%E6%97%A5%281%291731845818973.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/11%E6%9C%8818%E6%97%A51732011504798.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/11%E6%9C%8819%E6%97%A51732007426515.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/11%E6%9C%8820%E6%97%A5%20%281%291732097861150.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/%E7%AC%AC7%E6%9C%9F%E8%94%A1%E5%8A%A0%E5%BD%AC%28%E6%94%B9%291732239669588.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/3dcf0e554e30d24397967cfba357fcdb1732072470264.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/172181700542011731896698222.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/0169ce9da0f320d57fa80fb77e1ed5481729672310843.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/3dcf0e554e30d24397967cfba357fcdb17292401763641731476389747.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/5898f5164f6fff3e75d7bb797685f2df1729243405184.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/51710406608893.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/%E6%96%B011709779383968.mp4",
				"https://huiyi-dev-patient-upload.oss-cn-hangzhou.aliyuncs.com/editor/uploadImage/mda-pdnk17yyxdrgjgkw1698997880997.mp4"
			];
			let temp = origin.map(function(item) {
				return {
					src: item
				};
			})
			this.videoList = temp;
			this._videoListChanged(this.videoList);
			this.windowHeight = uni.getWindowInfo().windowHeight;
			console.log("Video--1")
			// this._videoContexts = [
			// 	uni.createVideoContext('video_0', that),
			// 	uni.createVideoContext('video_1', that),
			// 	uni.createVideoContext('video_2', that)
			// ];
		},
		methods: {
			_videoListChanged(newVal) {
				var _this = this;
				newVal.forEach(function(item) {
					_this.nextQueue.push(item);
				});
				if (_this.curQueue.length === 0) {
					_this.curQueue = _this.nextQueue.splice(0, 3);
				}
				this._videoContexts = [
					uni.createVideoContext('video_0', _this),
					uni.createVideoContext('video_1', _this),
					uni.createVideoContext('video_2', _this)
				];
				_this.playCurrent(0);
			},
			animationfinish(e) {
				let that = this;
				console.log("Video ", that.last);
				let tempCurQueue = that.curQueue;



				let current = e.detail.current;
				let diff = current - that.last;
				console.log("Video ani", current, that.last)
				if (diff == 0) return;

				that.last = current;

				that.playCurrent(current);
				console.log("Video diff", diff);
				let direction = diff === 1 || diff === -2 ? 'up' : 'down';
				if (direction == 'up') {
					console.log("Video===up");
					if (that.invalidDown == 0) {
						let change = (that.change + 1) % 3;
						let addItem = that.nextQueue.shift();
						let removeItem = that.curQueue[change];
						console.log("Viedo===up 1", removeItem);
						console.log("Viedo===up 1", addItem);
						if (addItem) {
							that.prevQueue.push(removeItem);
							tempCurQueue[change] = addItem;
							that.change = change;
						} else {
							that.invalidUp += 1;
						}
					} else {
						that.invalidDown -= 1;
					}
				}
				if (direction == 'down') {
					if (that.invalidUp == 0) {
						let change = that.change;
						let remove = that.curQueue[change];
						let addItem = that.prevQueue.pop();

						if (addItem) {
							tempCurQueue[change] = addItem;
							that.nextQueue.unshift(remove);
							that.change = (change - 1 + 1) % 3;
						} else {
							that.invalidDown += 1;
						}
					} else {
						that.invalidUp -= 1;
					}
				}

				let circular = true;
				if (that.nextQueue.length == 0 && current != 0) {
					circular = false;
				}

				if (that.prevQueue.length == 0 && current != 2) {
					circular = false;
				}

				that.curQueue = tempCurQueue;
				that.circular = circular;

			},


			playCurrent(current) {
				this._videoContexts.forEach(function(ctx, index) {
					index !== current ? ctx.pause() : ctx.play();
				});
			},
		},
	};
</script>

<style>
	.container {
		width: 100%;
		height: 100%
	}

	.video-swiper {
		width: 100%;
		height: 100%;
		/* background: rosybrown; */
	}

	.video_item {
		height: 300px;
		width: 100%
	}
</style>